<template>
  <div class="image-upload">
    <h2>图片上传</h2>
    <el-upload
      class="upload-demo"
      :auto-upload="false"
      :on-change="handleFileChange"
      :show-file-list="false"
      accept="image/*"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button 
        type="success" 
        @click="uploadImage" 
        :disabled="!selectedFile"
      >
        上传
      </el-button>
    </el-upload>

    <div v-if="imageUrl" class="preview text-center">
      <h3>预览:</h3>
      <img :src="imageUrl" alt="上传的图片" class="preview-image" />
    </div>
    
    <h2>图片列表</h2>
    <el-table :data="images" style="width: 100%">
      <el-table-column prop="filename" label="文件名" />

      <el-table-column label="预览">
        <template #default="{ row }">
          <img :src="getFileDownloadUrl(row.path)" class="table-image" />
        </template>
      </el-table-column>

      <el-table-column prop="size" label="大小(KB)">
        <template #default="{ row }">
          {{ (row.size / 1024).toFixed(2) }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button 
            size="small" 
            type="danger" 
            @click="deleteImage(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { 
  uploadFileAPI, 
  getFilesAPI, 
  deleteFileAPI,
  getFileDownloadUrl
} from '@/api/file-upload';
import { ElMessage, ElMessageBox } from 'element-plus';

interface ImageFile {
  id: string;
  filename: string;
  originalname: string;
  mimetype: string;
  size: number;
  path: string;
  // url: string;
}

const selectedFile = ref<File | null>(null);
const imageUrl = ref<string>('');
const images = ref<ImageFile[]>([]);

// 图片上传预览
const handleFileChange = (file: any) => {
  selectedFile.value = file?.raw;
  imageUrl.value = URL.createObjectURL(file?.raw);
};
// 图片上传
const uploadImage = async () => {
  if (!selectedFile.value) return;
  console.log(selectedFile.value);
  
    const response = await uploadFileAPI(selectedFile.value);
    imageUrl.value = response.data.path;
    await fetchImages();
};
// 图片列表获取
const fetchImages = async () => {
    const response = await getFilesAPI();
    images.value = response.data.data;
};
// 删除图片
const deleteImage = async (id: string) => {
    await ElMessageBox.confirm(
      '确定要删除这张图片吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    await deleteFileAPI(id);
    ElMessage.success('删除成功');
    await fetchImages();
};

onMounted(() => {
  fetchImages();
});
</script>

<style scoped>
.image-upload {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.preview-image {
  max-width: 300px;
  max-height: 300px;
  display: block;
  margin-top: 10px;
}

.table-image {
  max-width: 100px;
  max-height: 100px;
}

.upload-demo {
  margin-bottom: 20px;
}

.el-button + .el-button {
  margin-left: 10px;
}
</style>